<!DOCTYPE html>
<html lang="en" style="height:100%">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>卖给TA</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../../css/yzl.css" />
    <link rel="stylesheet" type="text/css" href="../../css/vant.css" />
    <!-- <link rel="stylesheet" href="../../css/sqc.css"> -->
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        input{
            outline:none;
        }
        .van-password-input__security{
          border-top: 1px solid #f7f4f2;
          border-bottom: 1px solid #f7f4f2;
          border-left: 1px solid #f7f4f2;
        }
        .van-password-input__security li{
          border-right: 1px solid #f7f4f2;
        }
    </style>
</head>

<body style="background: #fff;">
<div id="blank" class="header" v-cloak>
    <div v-back.tapmode class="back"></div>
    <span class="title">卖给TA</span>
</div>
<div id="app"  v-cloak style="padding-top: 60px">
    <div style="background-color: #fff;" class="user-home">
        <div class="sell-content">
            <div class="sell-content-top">
                <div class="details">
                    <div><img class="sell-top-img" v-src="'../../image/arrow.png'"/><span style="vertical-align: middle;display: inline-block;">预计获得 CNY</span></div>
                    <div style="margin-left: 10%"><img class="sell-top-img" v-src="'../../image/arrow-2.png'"/><span style="vertical-align: middle;display: inline-block;">预计支出 QHR(含手续费)</span></div>
                </div>
                <div class="details-bottom">
                    <div>{{details_con.totalPrice}}</div>
                    <div>{{details_con.totalCost}}</div>
                </div>
            </div>
            <div class="tran-content">
                <div class="seller-number-title" style="margin-bottom: 20px">
                    <p class="seller-letter">
                        C
                    </p>
                    <p class="seller-name">{{details_con.nickname}}</p>
                </div>
                <div class="detail-title">
                    <div class="unit-price-color">单价</div>
                    <div>{{details_con.tradePrice}} CNY</div>
                </div>
                <div class="detail-title">
                    <div class="unit-price-color">发布时间</div>
                    <div>{{details_con.createTime}}</div>
                </div>
                <div class="detail-title">
                    <div class="unit-price-color">数量</div>
                    <div>{{details_con.tradeNum}} QHR</div>
                </div>
            </div>
            <div class="determine" v-myclick='keyboard'>确定卖出</div>
            <div class="tips">
                <div class="tips-title">当前拥有{{(details_con.dayMasonry)}}QHR</div>
                <div class="tips-title-bottom">手续费{{details_con.ratio}}%&nbsp;&nbsp;实付总额:{{details_con.totalCost}}QHR</div>
                <span class="tips-title-bottom-span">&nbsp;&nbsp;如何降低手续费</span>
                <div>
                    <table border="1" cellspacing="0" style="text-align: center;width: 100%">
                        <tr style="width: 88px;height:36px; background-color:#F7F4F2;font-size:12px;">
                            <td>等级</td>
                            <td>要求</td>
                            <td>可交易数</td>
                            <td>交易手续费</td>
                        </tr>
                        <tr style="width: 88px;height:36px;color:#999;font-size:12px;">
                            <td>Lv0</td>
                            <td>实名认证</td>
                            <td>2</td>
                            <td>50%</td>
                        </tr>
                        <tr style="width: 88px;height:36px;color:#999;font-size:12px;">
                            <td>Lv1</td>
                            <td>经验值≥100</td>
                            <td>无限制</td>
                            <td>50%</td>
                        </tr>
                        <tr style="width: 88px;height:36px;color:#999;font-size:12px;">
                            <td>Lv2</td>
                            <td>经验值≥200</td>
                            <td>无限制</td>
                            <td>35%</td>
                        </tr>
                        <tr style="width: 88px;height:36px;color:#999;font-size:12px;">
                            <td>Lv3</td>
                            <td>经验值≥2000</td>
                            <td>无限制</td>
                            <td>28%</td>
                        </tr>
                        <tr style="width: 88px;height:36px;color:#999;font-size:12px;">
                            <td>Lv4</td>
                            <td>经验值≥5000</td>
                            <td>无限制</td>
                            <td>25%</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <van-popup v-model="show" position="bottom" closeable :style="{ height: '65%' }">
      <div class="keyboard_head">
        <div class="keyboard_head_con">输入支付密码</div>
      </div>
      <div style="margin:20px 0;">
        <div style="text-align:center;font-size:15px;margin-bottom:5px;">支付验证</div>
        <div style="text-align:center;font-size:12px;color:#999;">不扣除任何费用</div>
      </div>
      <van-password-input
        :value="value"
        :focused="showKeyboard"
        @focus="showKeyboard = true"
      ></van-password-input>
      <!-- 数字键盘 -->
    <van-number-keyboard
    :show="showKeyboard"
    extra-key="."
    @blur="show = false"
    @input="onInput"
    @delete="onDelete"
    />
    </van-popup>
</div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/url.js"></script>
<script src="../../script/components.js"></script>
<script type="text/javascript" src="../../script/jquery.js"></script>
<script type="text/javascript" src="../../script/jquery.base64.js"></script>
<script type="text/javascript" src="../../script/vant.min.js"></script>

<script>
    var vm,
        wx,
        details_list,
        details_con,
    apiready = function () {
        setBSImg();
        new Vue({
            el: '#blank'
        })
        var details={
    			agtVer:1,
    			clientVer:1,
    			ctime:201911071802959,
    			cctime:201911071802959,
    			sign:"abcdefg",
    			token:getPrefs('token'),
    			orderNo:api.pageParam.orderid,
    		}
    		var base = new Base64();
    		var	item=base.encode(JSON.stringify(details))
        var data = {
            jsonData:item,
        };
        var callback=function(ret){
    				// ret=initApp(ret)
            var base = new Base64();
            var details_list = base.decode(ret.content.jsonData);
            details_list =JSON.parse( details_list);
            details_con =details_list.coOrder
    				// content_list=JSON.parse(data_list);
    				console.log(JSON.stringify(details_list));
            initApp();
        }
        pinet.post(APIURLP+'/play/od/getInfoData',data, callback);
        api.parseTapmode();
        addListeners();
    };

    function initApp() {
        // var isBigImg = Vue.BSImg == 'big';
        vm = new Vue({
            el: '#app',
            data: {
               show: false,
               ddd:false,
               value: '',
               showKeyboard: true,
               details_list:details_list,
               details_con:details_con,
            },
            computed: {
            },
            methods: {
              keyboard:function(){
                this.show = true;
              },
              onInput(key) {
              this.value = (this.value + key).slice(0, 6);
              },
              onDelete() {
                this.value = this.value.slice(0, this.value.length - 1);
              },
            },
            watch: {
                value: function (value) {
                    if (value.length >= 6) {
                        var details = {
                            "agtVer": 1,
                            "clientVer": 1,
                            "ctime": 201911071802959,
                            "cctime": 201911071802959,
                            "sign": "abcdefg",
                            "token": getPrefs('token'),
                            "payPw": this.value,
                            "orderNo": this.details_con.orderNo,
                        }
                        var base = new Base64();
                        var item = base.encode(JSON.stringify(details));
                        var data = {
                            jsonData: item,
                        };
                        var callback = function (ret) {
                            // ret=initApp(ret)
                            vm.order_list = JSON.parse($.base64.decode(ret.content.jsonData));
                            vm.order_con = vm.order_list.oList
                            console.log(JSON.stringify(vm.order_list));
                            // console.log(JSON.stringify(vm.order_list.oList));
                            api.toast({
                                msg: '卖出成功',
                                duration: 2000,
                                location: 'middle'
                            });
                            vm.show = false;
                            vm.value = '';
                            closeWin();

                        }
                        pinet.post(APIURLP + '/play/td/addData', data, callback);
                    }
                }
            },
        })
    }
    function addListeners() {

      api.addEventListener({
          name: 'viewappear'
      }, function () {
      });
      api.addEventListener({
          name: 'keyback'
      }, function () {
          console.log('ddddd');
          api.closeWin();
      });
    }
</script>

</html>
